<template>
  <div class="dashboard">
      <h1>Admin Dashboard</h1>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>System Overview</span>
          </div>
        </template>
        <div class="card-content">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-statistic title="Total Users" :value="totalUsers" />
            </el-col>
            <el-col :span="6">
              <el-statistic title="Active Roles" :value="activeRoles" />
            </el-col>
            <el-col :span="6">
              <el-statistic title="Permissions" :value="totalPermissions" />
            </el-col>
            <el-col :span="6">
              <el-statistic title="System Uptime" :value="99.9" :precision="1" suffix="%" />
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '@/api'

const totalUsers = ref(0)
const activeRoles = ref(0)
const totalPermissions = ref(0)

const fetchDashboardData = async () => {
  try {
    const usersResponse = await api.getUsers()
    totalUsers.value = usersResponse.data.length

    const rolesResponse = await api.getRoles()
    activeRoles.value = rolesResponse.data.length

    const permissionsResponse = await api.getPermissions()
    totalPermissions.value = permissionsResponse.data.length
  } catch (error) {
    console.error('Failed to fetch dashboard data:', error)
  }
}

onMounted(fetchDashboardData)
</script>

<style scoped>
.box-card {
  margin-top: 20px;
}
.card-header {
  font-weight: bold;
  font-size: 18px;
}
.dashboard {
  padding: 20px;
}
</style>
